<template>
    <div>
        <div class="flex justify-between items-center">
            <el-space>
                <el-select
                    placeholder="请选择设备"
                    filterable
                    v-model="currentMachine"
                    @change="onChange"
                >
                    <el-option
                        v-for="item in productCategory"
                        :key="item.key"
                        :label="item.name"
                        :value="item.ip"
                    />
                </el-select>
                <el-button type="primary" @click="RefreshPage()"
                    >刷新页面</el-button
                >
            </el-space>
        </div>
        <div class="flex mt-4">
            <el-row :gutter="10">
                <el-col
                    :span="4"
                    v-for="item in LatticeData"
                    :key="item"
                    class="mb-2"
                >
                    <div class="w-full cell rounded-md border border-inherit">
                        <el-row class="h-full">
                            <el-col class="h-full border-r" :span="12"
                                ><div
                                    class="flex flex-col justify-center items-center h-full"
                                >
                                    <el-text class="mx-1" size="large">{{
                                        item.boxNum + '号'
                                    }}</el-text>
                                    <el-text class="mx-1" size="large">{{
                                        findItemB1(item.FaceEntityId).userSex
                                    }}</el-text>
                                    <el-text class="mx-1" size="large">{{
                                        findItemB(item.FaceEntityId, item)
                                            .userName
                                    }}</el-text>

                                    <el-image
                                        v-if="item.FaceEntityId > 0"
                                        style="width: 80px; height: 70px"
                                        :src="
                                            findItemB1(item.FaceEntityId, item)
                                                .base64ImagePath
                                        "
                                        fit="contain"
                                    /></div
                            ></el-col>
                            <el-col
                                class="h-full mx-auto flex flex-col justify-center items-center h-full"
                                :span="10"
                            >
                                <el-button
                                    type="primary"
                                    @click="RemoteDoorOpening(item)"
                                    >远程开门</el-button
                                >
                                <el-button
                                    class="mt-6"
                                    type="primary"
                                    @click="ReleaseLattice(item.boxNum)"
                                    >释放格子</el-button
                                ></el-col
                            >
                        </el-row>

                        <!-- <div class="w-3/6 h-full border-r mx-auto">
                            <el-text
                                class="text-current ml-2 content-none"
                                size="large"
                            >
                                {{ index + 1 }}</el-text
                            >
                        </div>
                        <div class="w-3/6 h-full border-r mx-auto"></div> -->
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
    <SetNameDialog
        ref="setNameDialog"
        :visible="state.visible"
        @close="handleDialogClose"
    />
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { requestedMessage } from '@/utils/asynchronous'
import { Search } from '@element-plus/icons-vue'
import Cabinet from '@/api/cabinet/Cabinet'
import SetNameDialog from '@/components/dialog/SetNameDialog.vue'

/**
 * 弹框
 */
const setNameDialog = ref()

/**
 * 弹框
 */
const state = reactive({
    visible: false
})

/**
 *  人员数据
 */
const PersonnelData = ref([])

/**
 *  格子返回数据
 */
const LatticeData = ref([])

/**
 * 设备地址
 */
const productCategory = JSON.parse(localStorage.getItem('machine'))
const currentMachine = ref(productCategory[0].ip)

onMounted(() => {
    /**
     * 根据人员ID获取人员信息
     */
    getPersonnelInformationList()
    /**
     * 获取查询列表
     */
    getCabinetList()
})

/**
 * 切换
 * @param {*} v
 */
function onChange(v) {
    RefreshPage()
}

/**
 * 刷新页面
 */
function RefreshPage() {
    /**
     * 根据人员ID获取人员信息
     */
    getPersonnelInformationList()
    /**
     * 获取查询列表
     */
    getCabinetList()
}
/**
 * 根据人员ID获取人员信息
 */
function getPersonnelInformationList() {
    requestedMessage(
        async () => {
            const { message, msg } = await Cabinet.getPersonnelInformationList(
                currentMachine.value
            )
            if (message != '') {
                PersonnelData.value = message
            }
            return msg
        },
        {
            showSuccess: false,
            fullscreenLoading: true
        }
    )
}

/**
 * 查询列表
 */
function getCabinetList() {
    requestedMessage(
        async () => {
            const { message, msg } = await Cabinet.getCabinetList(
                currentMachine.value
            )
            if (message != '') {
                LatticeData.value = message
            }
            return msg
        },
        {
            showSuccess: false,
            fullscreenLoading: true
        }
    )
}

/**
 * 远程开门
 */
function RemoteDoorOpening(item) {
    if (item.FaceEntityId > 0 || item.userName !== null) {
        requestedMessage(async () => {
            const { message, msg } = await Cabinet.RemoteDoorOpening(
                currentMachine.value,
                {
                    boxNum: item.boxNum,
                    userName: item.userName
                }
            )
            return msg
        })
    } else {
        setNameDialog.value.open(item.boxNum)
    }
}

/**
 * 释放格子
 */
function ReleaseLattice(boxNum) {
    requestedMessage(async () => {
        const { message, msg } = await Cabinet.ReleaseLattice(
            currentMachine.value,
            {
                boxNum: boxNum
            }
        )
        /**
         * 刷新页面
         */
        RefreshPage()
        return msg
    })
}

// 不需要使用 this，直接访问 PersonnelData
function findItemB(FaceEntityId, userName) {
    const person = PersonnelData.value.find(
        (person) => person.FaceEntityId === FaceEntityId
    )
    if (person === undefined) {
        return userName
    } else {
        return person ? person : ''
    }
}

// 不需要使用 this，直接访问 PersonnelData
function findItemB1(FaceEntityId) {
    const person = PersonnelData.value.find(
        (person) => person.FaceEntityId === FaceEntityId
    )
    return person ? person : ''
}

/**
 * 关闭回调
 */
function handleDialogClose() {
    /**
     * 刷新页面
     */
    RefreshPage()
}
</script>


<style scoped>
.cell {
    width: 100%;
    height: 20vh;
}

.el-button + .el-button {
    margin-left: 0px;
}
</style>